<template>
  <breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
  <div class="module-common-wrapped">
    <div class="module-common-content">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <!-- 1. 产品列表 -->
        <el-tab-pane label="产品列表" name="first">
          <div class="pane-content">
            <!-- 1-1. 表格 -->
            <div class="pane-top">
              <!-- 1-1-1. 搜索 -->
              <div class="module-common-header">
                <div class="search-wrapped">
									<el-input v-model="productId" class="w-50 m-2" size="large" placeholder="输入入库编号进行搜索" :prefix-icon="Search" 
                            @change="searchProduct()" clearable  @clear="getProductFirstPageList" />
								</div>
								<div class="button-wrapped">
									<el-button type="primary" @click="productInWarehouse">产品入库</el-button>
								</div>
              </div>
              <!-- 1-1-2. 表格 -->
              <div class="module-common-table">
                <el-table :data="tableData" border style="width: 100%">
									<el-table-column type="index" width="50" :index="indexMethod"></el-table-column>
									<el-table-column prop="product_id" label="入库编号" width="130" />
									<el-table-column prop="product_name" label="产品名称" width="180" />
									<el-table-column prop="product_category" label="产品类别" width="100" />
									<el-table-column prop="product_unit" label="单位" />
									<el-table-column prop="product_in_warehouse_number" label="库存数量" width="100" />
									<el-table-column prop="product_single_price" label="产品单价" width="120" />
									<el-table-column prop="product_all_price" label="库存总价" width="100" />
									<el-table-column prop="product_status" label="库存状态" width="100">
										<template #default="{row}">
											<el-tag class="ml-2" type="success"
												v-if="row.product_in_warehouse_number <= 100">库存较少</el-tag>
											<el-tag class="ml-2" type="success"
												v-else-if="row.product_in_warehouse_number > 100 && row.product_in_warehouse_number <= 300">库存正常</el-tag>
											<el-tag class="ml-2" type="success"
												v-else-if="row.product_in_warehouse_number > 300">库存过剩</el-tag>
										</template>
									</el-table-column>
									<el-table-column prop="product_create_person" label="入库负责人" width="100" />
									<el-table-column prop="product_create_time" label="入库时间" width="200">
										<template #default="{row}">
											<div>{{row.product_create_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_update_time" label="最后修改时间" width="200">
										<template #default="{row}">
											<div>{{row.product_update_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="in_memo" label="入库备注" width="200" />
									<el-table-column label="操作" width="300" fixed="right">
										<template #default="{row}">
											<div>
												<el-button type="primary" @click="applyOut(row)" :disabled='row.product_out_status=="申请出库" || row.product_in_warehouse_number==0'>申请出库</el-button>
												<el-button type="success" @click="editProduct(row)" :disabled='row.product_out_status=="申请出库"'>修改</el-button>
												<el-button type="danger" @click="deleteProduct(row.id)" :disabled='row.product_out_status=="申请出库"'>删除</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
              </div>
            </div>

            <!-- 1-2. 页码 -->
            <div class="table-footer">
              <div class="table-footer">
							  <el-pagination :page-size="1" :current-page="paginationData.productCurrentPage" :pager-count="7"  :total="paginationData.productTotal"
                    :page-count="paginationData.productPageCount" @current-change="ProductCurrentChange" layout="prev, pager, next" />
						  </div>
            </div>
          </div>
        </el-tab-pane>

        <!-- 2. 审核列表 -->
        <el-tab-pane label="审核列表" name="second">
          <div class="pane-content">
            <!-- 2-1. 表格 -->
            <div class="pane-top">
              <!-- 2-1-1. 搜索 -->
              <div class="module-common-header">
                <div class="search-wrapped">
									<el-input v-model="productOutId" class="w-50 m-2" size="large" placeholder="输入入库编号进行搜索" :prefix-icon="Search" 
                            @change="searchApplyProduct()" clearable  @clear="getApplyProductFirstPageList" />
								</div>
								<div class="button-wrapped">
									<!-- <el-button type="primary" @click="">产品审核</el-button> -->
								</div>
              </div>
              <!-- 2-1-2. 表格 -->
              <div class="module-common-table">
                <el-table :data="applyTableData" border style="width: 100%">
									<el-table-column type="index" width="50" :index="indexMethodA"></el-table-column>
									<el-table-column prop="product_out_id" label="申请出库编号" width="200" />
									<el-table-column prop="product_name" label="产品名称" width="200" />
									<el-table-column prop="product_out_number" label="申请出库数量" width="180" />
									<el-table-column prop="product_out_price" label="申请出库总价" width="180" />
									<el-table-column prop="product_out_apply_person" label="申请人" width="100" />
									<el-table-column prop="product_apply_time" label="申请出库时间" width="180">
										<template #default="{row}">
											<div>{{row.product_apply_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_out_audit_person" label="审核人" width="150" />
									<el-table-column prop="product_audit_time" label="审核时间" width="180">
										<template #default="{row}">
											<div>{{row.product_audit_time?.slice(0,10)}}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_out_status" label="审核状态" width="100" />
									<el-table-column prop="apply_memo" label="申请出库备注" width="200" />
									<el-table-column prop="audit_memo" label="审核备注" width="200" />
									<el-table-column label="操作" width="300" fixed="right">
										<template #default="{row}">
											<div>
												<el-button type="primary"@click="withdrawProduct(row.id)">撤回申请</el-button>
												<el-button type="success" :disabled='row.product_out_status=="申请出库"'@click="againApply(row)">再次申请</el-button>
												<el-button type="danger" :disabled="row.product_out_status=='否决' " @click="auditProduct(row)">审核</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
              </div>
            </div>

            <!-- 2-2. 页码 -->
            <div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.applyProductCurrentPage" :pager-count="7"  :total="paginationData.applyProductTotal" 
                    :page-count="paginationData.applyProductCount"  @current-change="applyProductCurrentChange" layout="prev, pager, next" />
						</div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

	<!-- 产品入库, 获取第一页数据(传过来success方法) 影响产品列表-->
	<warehousingP ref="in_warehouse" @success="getProductFirstPageList"></warehousingP>
	<!-- 申请操作影响审核列表 -->
	<applyP ref="apply_product" @success="changeTwoPageList"></applyP>
	<!-- 编辑操作影响产品列表 -->
	<editP ref="edit_product" @success='getProductFirstPageList'></editP>
	<!-- 删除操作影响产品列表 -->
	<deleteP ref="delete_product" @success='getProductFirstPageList'></deleteP>

	<!-- 审核操作影响产品列表、审核列表 -->
	<auditP ref="audit_product" @success='changeTwoPageList'></auditP>
	<!-- 撤回操作影响产品列表、审核列表 -->
	<withdrawP ref="withdraw_product" @success='changeTwoPageList'></withdrawP>
	<!-- 再次申请操作影响审核列表 -->
	<againP ref="again_product" @success='getApplyProductFirstPageList'></againP>

</template>
 
<script setup lang="ts">
  import { reactive, ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import breadCrumb from '@/components/bread_crumb.vue';  // 面包屑
	import { Search } from '@element-plus/icons-vue';  // 图标
  import type { TabsPaneContext } from 'element-plus';  // 选项卡
  import { bus } from "@/utils/mitt.js";
  import {
		searchProductForId,
		searchProductForApplyId,
		getProductLength,
		getApplyProductLength,
		returnProductListData,
		returnApplyProductListData,
	} from '@/api/product.js';

	import warehousingP from '../components/product_in_warehouse.vue';
	import applyP from '../components/apply.vue';
	import editP from '../components/edit_product.vue';
	import deleteP from '../components/delete_product.vue';
	import auditP from '../components/audit.vue';
	import withdrawP from '../components/withdraw.vue';
	import againP from '../components/again_apply.vue';

  const breadcrumb = ref() 
	const item = ref({
		first: '产品管理',
		second: '产品列表'
	})
  
  const activeName = ref('first')

	const indexMethod = (index:number) => { // index从0开始 
		if(paginationData.productCurrentPage===1){
			return index+1
		}else{
			return (paginationData.productCurrentPage-1) * 10 + (index+1)
		}
	}
	const indexMethodA = (index:number) => { // index从0开始 
		if(paginationData.applyProductCurrentPage===1){
			return index+1
		}else{
			return (paginationData.applyProductCurrentPage-1) * 10 + (index+1)
		}
}

	onMounted(() => {
		getProductFirstPageList()
	})

  // 当用户点击选项卡时触发
  const handleClick = (tab: TabsPaneContext) => {
		if (tab.props.label == '产品列表') {
			getProductFirstPageList()
		}
		if (tab.props.label == '审核列表') {
			getApplyProductFirstPageList()
		}
	}

  // 产品入库编号
	const productId = ref < number > ()
	// 产品申请出库编号
	const productOutId = ref < number > ()
	// 产品表格
	const tableData = ref([])
	// 产品申请出库表格
	const applyTableData = ref([])

  // 分页数据
	const paginationData = reactive({ 
		productTotal: 0, // 产品总数 
		productPageCount: 0, // 产品列表总页数 
		productCurrentPage: 1, // 产品列表当前所处页数 
		applyProductTotal: 0, // 申请的总数 
		applyProductCount: 0,  // 申请列表总页数 
		applyProductCurrentPage: 1, // 申请列表当前所处页数
	})

  // 产品列表监听换页
	const ProductCurrentChange = async (value: number) => {
		paginationData.productCurrentPage = value
		const res = await returnProductListData(paginationData.productCurrentPage)
    tableData.value = res.data
	}

  // 申请列表监听换页
  const applyProductCurrentChange = async (value:number) => {
    paginationData.applyProductCurrentPage = value
    const res = await returnApplyProductListData(paginationData.applyProductCurrentPage)
    tableData.value = res.data
  }

  // ----------------------------------------------------------产品列表
  // 通过产品入库ID去搜索 product表 product_id
  const searchProduct = async () => {
    const res = await searchProductForId(productId.value)
    tableData.value = res.data
  }

	// 获取产品列表的页数
	const getProductListLength = async () => {
		const res = await getProductLength()
		paginationData.productTotal = res.data.length
		let len = Math.ceil(res.data.length / 10)
		paginationData.productPageCount = len>0 ? len : 1
	}
	getProductListLength()

  // 输入框清空也调用这个函数
  const getProductFirstPageList = async () => {
		const res = await returnProductListData(1) //获取第一页数据
    tableData.value = res.data
		getProductListLength()
		paginationData.productCurrentPage = paginationData.productCurrentPage>0 ? paginationData.productCurrentPage: 1
	}
  getProductFirstPageList()

  // 产品入库 
	const in_warehouse = ref()
  const productInWarehouse = () => {
		in_warehouse.value.open()
  }

  // 申请出库
	const apply_product = ref()
  const applyOut = (row:any) => {
		bus.emit('applyId', row)
		apply_product.value.open()
  }

  // 编辑产品信息
	const edit_product  = ref()
	const editProduct = (row: any) => {
		bus.emit('editProductId', row)
    edit_product.value.open()
	}

	// 删除产品
	const delete_product  = ref()
	const deleteProduct = (id: number) => {
		bus.emit('deleteProductId', id)
    delete_product.value.open()
	}

  // ------------------------------------------------------------审核列表
  // 通过产品申请出库ID去搜索 product表 product_out_id(outproduct表也有这个字段)
  const searchApplyProduct = async () => {
    const res = await searchProductForApplyId(productId.value)
    applyTableData.value = res.data
  }

	// 获取审核列表的页数
	const getApplyProductListLength = async () => {
		const res = await getApplyProductLength()
		paginationData.applyProductTotal = res.data.length
		let len = Math.ceil(res.data.length / 10)
		paginationData.applyProductCount = len>0 ? len : 1
	}
	getApplyProductListLength()

  //获取第一页数据
  const getApplyProductFirstPageList = async () => {
    const res = await returnApplyProductListData(1) 
    applyTableData.value = res.data
		getApplyProductListLength()
		paginationData.applyProductCurrentPage = paginationData.applyProductCurrentPage>0 ? paginationData.applyProductCurrentPage : 1
  }
  getApplyProductFirstPageList()

	// 审核
	const audit_product = ref()
  const auditProduct = (row:any) => {
		bus.emit('applyProductInfo', row)
    audit_product.value.open()
	}

  // 撤销申请
	const withdraw_product = ref()
  const withdrawProduct = (id:number) => {
		bus.emit('withdrawId', id)
    withdraw_product.value.open()
  }

  // 再次申请
	const again_product = ref()
  const againApply = (row:any) => {
		bus.emit('againId', row)
    again_product.value.open()
  }
  
	// 更新产品列表及审核列表的第一页数据
	const changeTwoPageList = () => {
		getProductFirstPageList()
		getApplyProductFirstPageList()
	}
</script>

<style lang="scss" scoped>
  
</style>
